<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1_使用jsx创建虚拟dom</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //模拟以希望数据
        const data = ['Angular', 'React', 'Vue']
        /*js语句(代码)和js的表达式
                                    表达式：
                                       (1). a
                                       (2). a+b
                                       (3). demo(1)
                                       (4). arr.map()
                                       (5). function test(){}
                                    代码:
                                       (1). if(){}
                                       (2). for(){}
                                       (3). swith(){case:xxx}
        
                                */
        const VDOM = (
            <div>
                <h1 id="title">前端js框架列表</h1>
                <ul>
                    {
                        data.map((item) => {
                            return <li key=''>{item}</li>
                        })
                    }
                </ul>
            </div>
        )

        ReactDOM.render(VDOM, document.getElementById('test'))

    </script>
</body>
</body>

</html>